<template>
  <div class="padding-left">
  <div class="comment-box">
    <div class="w-box padding-right">
      <div class="edit">
        <!-- <img :src="getHeadimgurl(userInfo.userid,userInfo.headimgurl)" class="avatar" @error="onImgError(userInfo.userid,$event)" /> -->
        <div class="input-box">
          <el-input type="textarea" :rows="4" placeholder="请输入你的内容" v-model="commentTxt"/>
        </div>
      </div>
      <div class="bottom-btns">
        <!-- <img src="../../../../../static/images/expression.png" class="expression" /> -->
        <el-button icon="Refresh" @click="getXmComments()" v-loading="loading"/><el-button type="primary" icon="chat-dot-square" @click="publishComment">发表</el-button>
      </div>
    </div>
    <div v-if="commentsList?.length>0" class="comment-list">
      <xm-comment-list v-for="(item) in commentsList" :modelValue="item" :key="item.id" @getList="getXmComments" />
      
    </div> 
    
  </div>
  <div class="page-set">
        <el-space><el-button v-loading="loading" size="small" icon="Refresh" style="float:right;margin-top:10px;" @click="getXmComments()"/>
        <el-pagination size="small" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100, 500]" :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize" :total="pageInfo.total" />
      </el-space>
 
      </div>
    </div>
</template>

<script>

import { listXmComment, addXmComment,delXmComment, batchDelXmComment,editSomeFieldsXmComment } from '@/api/xm/core/xmComment';
 import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user';
 
export default {
  name: 'commentArea',
  props: ['bizId','pbizId','objType'], 
  computed: {
    ...mapState(useUserStore,['userInfo']),
    bizKey(){
      return this.objType+'-'+this.pbizId+'-'+this.bizId
    }
  },
  data() {
    return {
      loading:false,
      avatarUrl: '',
      commentTxt: '',
      commentsList: [],

      pageInfo: {//分页数据
        total: 0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10,//每页数据
        count:true,//是否需要重新计算总记录数
        pageNum: 1,//当前页码、从1开始计算
        orderFields: ['CDATE'],//排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: ['desc']//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
    };
  },
  watch:{
    bizKey(){
      this.getXmComments();
    }
  },
  methods: { 
    handleSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.getXmComments();
    },
    handleCurrentChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.getXmComments();
    }, 
    // 格式化评论数据
    commentListFormat() {
      this.commentsList.forEach((item) => { 
        item.childList=[]
        // 将回复该评论的评论放入childList中
        let arr = this.commentsList.filter((i) => i.pid === item.id);
        if (arr.length > 0) {
          item.childList = arr;
        }
      });
      // 过滤出最高级
      this.commentsList = this.commentsList.filter((item) => item.pid === null);
    },
    publishComment() {
      if (this.userInfo.userid) {
        let params = {
          bizId: this.bizId,
          pbizId: this.pbizId,
          objType: this.objType,
          context: this.commentTxt,
        };
        if(!this.bizId){
          params.bizId=this.pbizId
        }
        if (params.context) {
          addXmComment(params).then((res) => {
            let tips = res.tips;
            if (tips.isOk) {
              this.$message({
                type: 'success',
                message: '评论成功',
              });
              this.commentTxt = ''; 
              this.getXmComments();
            } else {
              this.$message({
                message: tips.msg,
                type: 'error',
              });
            }
          });
        } else {
          this.$message({
            type: 'error',
            message: '评论内容不能为空',
          });
        }
      } else {
        this.$message({
          type: 'error',
          message: '您还没有登录，请先登录！',
        });
      }
    },
    getXmComments() {
      if (!this.bizId && !this.pbizId) {
        return;
      }

      let params = {
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
        total: this.pageInfo.total,
        count: this.pageInfo.count, 
        pidIsNull: "1",
      };
      if(this.bizId){
        params.bizId=this.bizId
      }
      if(this.pbizId){
        params.pbizId=this.pbizId
      }
      if(this.objType){
        params.objType=this.objType
      }
      if (this.pageInfo.orderFields != null && this.pageInfo.orderFields.length > 0) {
        let orderBys = [];
        for (var i = 0; i < this.pageInfo.orderFields.length; i++) {
          orderBys.push(this.pageInfo.orderFields[i] + " " + this.pageInfo.orderDirs[i])
        }
        params.orderBy = orderBys.join(",")
      }
      this.loading=true;
      listXmComment(params).then((res) => {
        this.loading=false;
        let tips = res.tips;
        if (tips.isOk) {
          this.pageInfo.total = res.total;
          this.pageInfo.count = false;
          let list = res.data;
          this.commentsList = list;
          if (res.children && res.children.length > 0) {
            this.commentsList.unshift(...res.children)
          }

          this.commentListFormat();

        } else {
          this.$message({
            message: tips.msg,
            type: 'error',
          });
        }
      });
    },
  },
  mounted() { 
    this.getXmComments();
  },
};
</script>

<style lang="scss" scoped>
.comment-box {
  .w-box {
    margin-bottom: 20px;

    .edit {
      display: flex;

      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 24px;
        border-radius: 50%;
        border: 1px solid #f1f1f1;
      }

      .input-box {
        width: calc(100%);
      }
    }

    .bottom-btns {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .expression {
        width: 22px;
        height: 22px;
        margin-right: 16px;
        border-radius: 50%;
        cursor: pointer;
      }

      .expression:hover {
        opacity: 0.8;
      }
    }
  }

  .comment-list {
    .page-set {
      text-align: right;
    }
  }

  .no-msg {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #b5b5b5;

    .no-pic {
      width: 60px;
      height: 60px;
      margin-right: 12px;
    }
  }
}
</style>